#banner {
    background-color: #111;
    text-align: center;
    padding-top: 20vw;

    &>h1 {
        text-transform: uppercase;
        color: #999;
        font-family: OSLight;
        font-size: 44px;

        span {
            color: #fcac45;
            font-family: OSBold;
        }
    }

    h5 {
        font-size: 20px;
        color: #c3c3c3;
        font-family: OSLight;

        span {
            color: #c3c3c3;
            font-family: OSBold;
        }
    }

    .arrow-btn {
        margin-top: 33vh;
        margin-bottom: 15vh;

        a {
            margin-bottom: 21px;
        }
    }
}

#about {
    padding-top: 3vw;
    width: 100vw;

    &>.container {
        display: flex;

        .left {
            width: 65%;
        }

        .right {
            width: 35%;

            .small-title {
                color: gray;
            }

            .big-title {
                font-size: 28px;
                text-transform: uppercase;

                span {
                    font-family: OSBold;
                }
            }

            .line {
                width: 100px;
                height: 5px;
                background-color: #fcac45;
                margin-top: 14px;
            }

            .content {
                font-size: 14px;
                font-family: OSLight;
                margin-top: 21px;
                width: 85%;
            }

            ul {
                margin-top: 25px;

                li {
                    margin-top: 11px;
                }
            }

            .about-btn {
                height: 40px;
                margin-top: 21px;
                border: 1px solid black;
                width: 50%;
                // height: 10%;
                text-align: center;
                line-height: 40px;
                border-radius: 2px;
            }
        }
    }
}

// #team {
//     background-color: #111;

//     &>.container {

//         .team-text {
//             width: 100%;
//             width: 100%;
//             color: white;
//             font-size: 27px;
//             text-align: center;
//             padding-top: 27px;
//             line-height: 10vh;

//             span {
//                 font-family: OSBold;
//                 text-transform: uppercase;
//             }

//             .team-one {
//                 width: 10vw;
//                 height: 1vh;
//                 background-color: #fcac45;
//                 border-radius: 3px;
//                 margin: 0 auto;
//                 margin-top: 11px;
//             }

//             .team-two {
//                 width: 5vw;
//                 height: 1vh;
//                 background-color: #fcac45;
//                 border-radius: 3px;
//                 margin: 0 auto;
//                 margin-top: 14px;
//             }
//         }

//         .thumbnail {
//             background-color: #111;
//             border: unset;
//             color: white;
//             // margin: 0 auto;
//             margin-top: 13vh;

//             img {
//                 height: 60px;
//                 width: 60px;
//                 border: 1px solid white;
//             }

//             .caption {
//                 color: white;

//                 .team-text-1 {
//                     font-family: OSBold;

//                 }

//                 .team-text-2 {
//                     font-family: OSLight;
//                 }
//             }

//             &>p {
//                 font-family: OSLight;
//             }

//         }

//         .team-bottom {
//             text-align: center;
//             margin-top: 56vh;
//             padding-bottom: 30px;

//             a {
//                 width: 14px;
//                 height: 14px;
//                 background-color: white;
//             }
//         }

//     }
// }

#team {
    background-color: #070707;
    padding-top: 8vw;
    padding-bottom: 5vw;

    .title {
        font-size: 44px;
        color: #fff;
        font-family: OSLight;
        text-align: center;
        text-transform: uppercase;

        span {
            font-family: OSBold;
        }
    }

    .line1 {
        width: 99px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 9px;
        border-radius: 14px;
    }

    .line2 {
        width: 67px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 9px;
        margin-bottom: 5vw;
        border-radius: 14px;

    }

    .swiper.team-swiper {
        padding-bottom: 5vw;
        overflow: unset;
        overflow-x: hidden;

        .list {
            display: flex;

            .item {
                width: 24%;
                text-align: center;

                .avatar {
                    width: 128px;
                    height: 128px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin: 0 auto;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .nickname {
                    color: #fff;
                    margin-top: 20px;

                    p:first-child {
                        font-family: OSBold;
                    }

                    p:last-child {
                        font-size: 12px;
                        font-family: OSLight;
                    }
                }

                .info {
                    margin-top: 28px;
                    width: 90%;
                    color: #fff;
                }
            }
        }

        .swiper-pagination-bullet {
            background-color: #fff;
            opacity: 1;
            border-radius: unset;
        }

        .swiper-pagination-bullet-active {
            background-color: #fcac45;
        }
    }
}


#services {
    background-color: white;
    .line1 {
        width: 99px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 9px;
        border-radius: 14px;
    }

    .line2 {
        width: 67px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 9px;
        margin-bottom: 5vw;
        border-radius: 14px;

    }

    &>.container {
        margin-top: 15vh;
        text-align: center;
        padding-bottom: 30px;

        .services-text {
            font-size: 24px;

            span {
                font-family: OSBold;
            }

            .services-one {
                width: 10vw;
                height: 1vh;
                background-color: #fcac45;
                border-radius: 3px;
                margin: 0 auto;
                margin-top: 11px;
            }

            .services-two {
                width: 5vw;
                height: 1vh;
                background-color: #fcac45;
                border-radius: 3px;
                margin: 0 auto;
                margin-top: 14px;
            }

            p {
                font-size: 13px;
                color: #6c6c6c;
                margin-top: 16px;
            }
        }

        .thumbnail {
            margin-top: 88px;
            border: unset;

            .thumbnail-text {
                font-family: OSBold;
                font-size: 19px;
            }

            .thumbnail-img {
                border: 3px solid #fcac45;
                border-radius: 50%;
                margin: 0 auto;
                width: 130px;
                height: 130px;
                line-height: 130px;

                img {
                    height: 50px;
                    width: 50px;
                }
            }
        }

    }
}

#clients {
    background-color: #0b0b0b;
    .line1 {
        width: 99px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 9px;
        border-radius: 14px;
    }

    .line2 {
        width: 67px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 9px;
        margin-bottom: 5vw;
        border-radius: 14px;

    }
    &>.container {
        .clients-text {
            width: 100%;
            width: 100%;
            color: white;
            font-size: 27px;
            text-align: center;
            padding-top: 27px;
            line-height: 10vh;

            span {
                font-family: OSBold;
                text-transform: uppercase;
            }

            .clitens-one {
                width: 10vw;
                height: 1vh;
                background-color: #fcac45;
                border-radius: 3px;
                margin: 0 auto;
                margin-top: 11px;
            }

            .clients-two {
                width: 5vw;
                height: 1vh;
                background-color: #fcac45;
                border-radius: 3px;
                margin: 0 auto;
                margin-top: 14px;
            }
        }

        .clients-img {
            text-align: center;
            margin-top: 150px;
            padding-bottom: 150px;
        }

        .clients-bottom {
            text-align: center;
            padding-bottom: 30px;

            a {
                width: 14px;
                height: 14px;
                background-color: white;
            }
        }
    }
}

#work {
    background-color: white;
    line-height: unset;
    .line1 {
        width: 99px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 9px;
        border-radius: 14px;
    }

    .line2 {
        width: 67px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 9px;
        margin-bottom: 5vw;
        border-radius: 14px;

    }
    &>.container {
        .work-text {
            width: 100%;
            width: 100%;
            color: black;
            font-size: 27px;
            text-align: center;
            padding-top: 27px;

            span {
                font-family: OSBold;
                text-transform: uppercase;
            }

            .work-one {
                width: 10vw;
                height: 1vh;
                background-color: #fcac45;
                border-radius: 3px;
                margin: 0 auto;
                margin-top: 11px;
            }

            .work-two {
                width: 5vw;
                height: 1vh;
                background-color: #fcac45;
                border-radius: 3px;
                margin: 0 auto;
                margin-top: 14px;
            }

            p {
                font-size: 16px;
                font-family: OSLight;
                margin-top: 24px;
            }
        }

        .work-content {
            margin-bottom: 100px;

            .work-top {
                display: flex;
                justify-content: space-between;
                margin-top: 27px;

                .work-left {
                    font-family: OSBold;
                    font-size: 21px;
                }

                .work-right {
                    font-family: OSLight;

                    span:nth-of-type(1) {
                        font-family: OSBold;
                    }
                }
            }

            &>.work-img {
                width: 100%;
                display: flex;
                flex-wrap: wrap;

                .work-img-box {
                    width: 25%;
                    position: relative;
                    overflow: hidden;
                    text-align: center;
                    margin-top: 30px;

                    .work-of-hover {
                        position: absolute;
                        top: 0;
                        left: 4%;
                        width: 92.5%;
                        height: 100%;
                        background-color: #222222;
                        opacity: 0;
                        transition: opacity 0.5s ease;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                        color: white;

                        p {
                            margin: 0px 0;
                            font-size: 16px;
                            color: #fff;
                        }

                        p:nth-of-type(2) {
                            color: #b2b2b2;
                            font-size: 14px;
                            margin-bottom: 34px
                        }

                        img {
                            display: block;
                            margin: 0 auto;
                        }
                    }

                    &:hover .work-of-hover {
                        opacity: 1;
                    }
                }
            }
        }
    }
}

#testimonials {
    background-color: #000;
    padding-top: 8vh;

    .title {
        font-size: 44px;
        color: #fff;
        font-family: OSLight;
        text-align: center;
        text-transform: uppercase;

        span {
            font-family: OSBold;
        }
    }

    .line1 {
        width: 99px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 9px;
        border-radius: 14px;
    }

    .line2 {
        width: 67px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 9px;
        margin-bottom: 5vw;
        border-radius: 14px;
    }

    &>.container {
        .swiper-wrapper {
            .swiper-slide {
                .list {
                    text-align: center;

                    .item {
                        .text {
                            font-size: 18px;
                            font-family: OSLight;
                            color: #fff;
                        }

                        .name {
                            margin-top: 11vh;
                            color: #b2b2b2;
                        }
                    }
                }
            }
        }
    }

    .swiper-pagination2 {
        text-align: center;
        margin-top: 30px;
        padding-bottom: 30px;

        .swiper-pagination-bullet {
            background-color: #fff;
            opacity: 1;
            border-radius: unset;
        }

        .swiper-pagination-bullet-active {
            background-color: #fcac45;
        }
    }



}

#contact {
    margin-top: 9vh;
    width: 100%;
    height: 100%;

    .title {
        font-size: 44px;
        color: #000;
        font-family: OSLight;
        text-align: center;
        text-transform: uppercase;

        span {
            font-family: OSBold;
        }
    }

    .line1 {
        width: 99px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 9px;
        border-radius: 14px;
    }

    .line2 {
        width: 67px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 9px;
        margin-bottom: 3vw;
        border-radius: 14px;
    }

    .content {
        width: 63%;
        height: 100%;
        margin: 0 auto;

        p {
            margin: 0 auto;
            text-align: center;
            font-size: 18px;
            font-family: OSLight;
            padding-bottom: 5vw;
        }
    }

    .info {
        .container {
            width: 63%;
            font-family: OSLight;

            .info-head {
                width: 100%;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                .contact-info-left .contact-info-right {
                    width: 100%;
                }

                span {
                    color: red;
                }

                input {
                    width: 460px;
                    height: 30px;
                    margin-top: 13px;
                }
            }

            .info-foot {
                margin-top: 14px;

                input {
                    margin-top: 7px;
                    height: 165px;
                    width: 100%;
                    flex-wrap: wrap;
                }

                textarea {
                    width: 100%;
                    padding: 10px;
                    text-align: left;
                    resize: vertical;
                    white-space: pre-wrap;
                    word-wrap: break-word;
                    border: 1px solid #ddd;
                    font-family: inherit;
                }
            }

            button {
                float: right;
                margin-top: 13px;
                width: 160px;
                height: 40px;
                margin-bottom: 100px;
                background-color: #fcac45;
            }

        }
    }
}



@media screen and (max-width:768px) {
    #banner {
        padding-top: 11vw;

        h1 {
            font-size: 28px;
        }

        &>h5 {
            font-size: 14px;
        }

        .arrow-btn {
            margin-top: 12vw;
            margin-bottom: 10vw;
        }
    }

    #about {
        &>.container {
            display: block;
            width: 100%;

            .left {
                width: 100%;
            }

            .right {
                width: 100%;

                .small-title {
                    font-size: 18px;
                }

                .big-title {
                    font-size: 24px;
                }

                .content {
                    font-size: 21px;
                }

                ul {
                    li {
                        font-size: 17px;
                    }
                }

                .about-btn {
                    margin-bottom: 10vh;
                    width: 100%;
                }
            }
        }
    }

    #team .swiper.team-swiper .list {
        flex-wrap: wrap;

        .item {
            width: 50%;
            margin-top: 15px;

            .nickname {
                margin-top: 10px;
            }

            .info {
                margin-top: 15px;
            }
        }
    }

    #team {
        .title {
            font-size: 18px;
        }

        .swiper {
            .swiper-wrapper {
                .swiper-slide {
                    .list {
                        .nickname {
                            font-size: 11px;
                        }

                        .info {
                            font-size: 11px;
                        }
                    }
                }
            }

            .swiper-pagination-bullets {
                bottom: var(--swiper-pagination-bottom, -7px);
            }
        }
    }

    #services {
        &>.container {
            margin-top: 3vh;
            .services-text{
                font-size: 18px;
            }
            #phone{
                padding: 0;
                margin: 0;
                margin-top: -11vh;
            }
        }
    }

    #clients {
        &>.container {
            .clients-text {
                font-size: 18px;
            }

            .clients-img {
                margin-top: 8rem;
                padding-bottom: 10rem;

                img {
                    object-fit: cover;
                }
            }
        }
    }

    #work {
        &>.container {
            .work-text {
                font-size: 18px;

                p {
                    font-size: 11px;
                }
            }

            .work-content {
                .work-top {
                    flex-wrap: wrap;

                    .work-left {
                        width: 100%;
                    }

                    .work-right {
                        width: 100%;
                        margin-left: 4px;
                    }
                }

                .work-img {
                    .work-img-box {
                        width: 50%;

                        img {
                            width: 88%;
                        }

                        .work-of-hover {
                            width: 90%;
                            height: 100%;

                            p {
                                padding-top: 13px;
                                font-size: 14px;
                            }

                            &>p:nth-of-type(2) {
                                margin-bottom: -11px;
                            }

                            img {
                                padding-top: 11px;
                            }
                        }
                    }
                }
            }
        }
    }

    #testimonials{
        .title{
            font-size: 18px;
        }

        .line1{
            margin-top: 17px;
        }

        .swiper{
            .swiper-wrapper{
                .swiper-slide{
                    .list{
                        .item{
                            .text{
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }

    #contact{
            .title{
                font-size: 25px;
            }
            .content{
                p{
                    font-size: 12px;
                }
            }

            .info{
                & > .container{
                    .info-head{
                        .contact-info-left{
                            width: 100%;
                        }
                        .contact-info-right{
                            width: 100%;
                        }
                        input{
                            width: 100%;
                        }
                    }
                    button{
                        width: 100%;
                        margin-top: 3vh;
                        margin-bottom: 6vh;
                    }
                }

            }
    }

}